<script setup lang="ts">
import { ref } from 'vue'
import type { Doctor } from '@/types/doctor'
import { onLoad } from '@dcloudio/uni-app'
import { getDoctor, verifyDoctor } from '@/services/doctor'

const doctor = ref<Required<Doctor>>()
const segmentItems = ['未审核', '通过', '不通过']

const verifyStatus = ref(1)

onLoad((query?: AnyObject) => {
  getData(query!.id)
})

function onClickItem(e: UniHelper.UniSegmentedControlOnClickItemEvent) {
  verifyStatus.value = e.currentIndex + 1
}

async function getData(id: number) {
  doctor.value = await getDoctor(id)
}

async function verify() {
  if (verifyStatus.value === 1) return
  console.log(verifyStatus.value)
  await verifyDoctor({
    id: doctor.value!.id,
    verifyStatus: verifyStatus.value,
  })
  await uni.showToast({
    title: verifyStatus.value.toString(),
    icon: 'success',
  })
  setTimeout(() => uni.navigateBack(), 1500)
}
</script>

<template>
  <view class="container" v-if="doctor">
    <view class="panel">
      <view class="panel-title">
        医生照片
      </view>
      <image :src="doctor.photoFront" mode="aspectFit"></image>
    </view>

    <view class="panel">
      <view class="panel-title">
        医生胸卡照片
      </view>
      <image :src="doctor.badgesPhoto" mode="aspectFit"></image>
    </view>

    <!-- 表格 -->
    <!-- 面板 -->
    <view class="panel">
      <view class="panel-title">
        医生信息
      </view>
      <view class="panel-body">
        <uni-table border stripe emptyText="暂无更多数据">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th align="left" width="90">姓名</uni-th>
            <uni-th align="left">{{ doctor.name }}</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <!-- <uni-tr>
              <uni-td>姓名</uni-td>
              <uni-td>{{doctor.name}}</uni-td>
            </uni-tr> -->
          <uni-tr>
            <uni-td>性别</uni-td>
            <uni-td>{{ doctor.sex === 0 ? '男' : '女' }}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td>年龄</uni-td>
            <uni-td>{{ doctor.age }}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td>学位</uni-td>
            <uni-td>{{ doctor.degree }}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td>职称</uni-td>
            <uni-td>{{ doctor.position }}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td>科室</uni-td>
            <uni-td>{{ doctor.sectionOffice }}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td>专长</uni-td>
            <uni-td>{{ doctor.specialty }}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td>就职医院</uni-td>
            <uni-td>{{ doctor.hospital }}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td>临床经验</uni-td>
            <uni-td>{{ doctor.clinicalExperience }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>

    <view class="segment panel">
      <view class="datetime">
        医生资料提交时间：2021/09/19 20:57
      </view>

      <uni-segmented-control :values="segmentItems" :current="0"
                             @clickItem="onClickItem"
                             styleType="button" activeColor="#25cecb"
      />
    </view>

    <button @click="verify" type="warn">确认</button>
  </view>
</template>

<style lang="scss">
.container {
  padding-bottom: 20px;
  button {
    line-height: 2;
    font-size: 16px;
    // background-color: #00e676;
    position: fixed;
    bottom: 5px;
    left: 20px;
    right: 10px;
    border-radius: 20px;
  }
}

.panel {
  background-color: white;
  border-radius: 5px;
  margin-bottom: 10px;

  .panel-title {
    line-height: 45px;
    padding-left: 10px;
    font-size: 15px;
    font-weight: bold;
    color: $blueColor;
  }

  image {
    height: 200px;
    margin: 0 auto;
  }

  // .panel-body {
  //   display: flex;
  //   justify-content: center;
  // }
}

.segment {
  padding: 10px;
  margin-bottom: 60px;

  .datetime {
    margin-bottom: 20px;
  }
}
</style>
